import {CallStatistic} from "./callModule.jsx"

class CallPage extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            option:{
                title: {
                    text: '呼叫数据统计',
                    left:'45%',
                    top:'10%',
                    textAlign:'center',
                },
                grid:{
                    left:'5%',
                    right:'5%'
                },
                tooltip: {},
                legend: {
                    data:['呼叫次数']
                },
                xAxis: {
                    data: ['']
                },
                yAxis: {},
                series: [{
                    name: '次数',
                    type: 'bar',
                    data: ['']
                }]
            },
            subtext:'',
            totalCallCount:0,
            SLICE_MODE_DAY:0,
            SLICE_MODE_HOUR:1
        }
    }

    search(){

        let timeStart = convertString2Date(this.refs.dateSelect.rangeStart);
        let timeEnd = convertString2Date(this.refs.dateSelect.rangeEnd);
        this.refs.callStatistic.search(timeStart.getTime()/1000,timeEnd.getTime()/1000,
            this.refs.commSelect.commCode,this.refs.timeSelect.value);
    }

    commChange(comm){
        this.refs.callStatistic.init(comm);
    }

    render(){
        return  (
            <Frame header="呼叫统计">
                    <Form type="pane">
                        <Item>
                            <LayuiCommSelect mask={['building', 'unit', 'floor', 'room']}
                                             ref="commSelect"
                                             formLabelName="小区"
                                             firstValue={hasRoles("admin")?"全部小区":''}
                                             onChangeComm={(comm) => this.commChange(comm)}/>

                            <Label>时间选择</Label>
                            <DateSelect ref="dateSelect" range="true"/>

                            <Label>单位</Label>
                            <Select ref="timeSelect">
                                <option value={0}>日</option>
                                <option value={1}>时</option>
                            </Select>
                            <Button onClick={()=>this.search()}>查询</Button>
                        </Item>
                    </Form>
                    <hr/>
                    <div>
                        <CallStatistic ref="callStatistic"/>
                    </div>
            </Frame>
            )
    }
}

ReactDOM.render(<CallPage/>,document.getElementById("call"));
